import React from 'react'
import './SonCom.css'
import {Link} from 'react-router-dom'
class SonCom extends React.Component {
  constructor() {
    super()
    this.state = {
      msg: 'hello'
    }
  }
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', '组件从父组件接受新的属性');
    console.log(nextProps);
    console.log(this.props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('4','shouldComponentUpdate', '组件是否更新');
    console.log(nextProps, nextState);
    console.log(this.props);
    return true
  }
  componentWillUnmount() {
    console.log('componentWillUnmount', '组件即将卸载');
  }
  render(props) {
    console.log('子组件正在渲染...');
    return (
      <div className="child">
        {/* <p>当前页面地址：{this.props.location.pathname}</p> */}
        {/* <Link to="/" className={this.props.location.pathname == '/'?'active': ''}>返回首页</Link>
        <Link to="/fathercom" className={this.props.location.pathname == '/fathercom'?'active': ''}>父组件页</Link>
        <Link to="/soncom" className={this.props.location.pathname == '/soncom'?'active': ''}>子组件页</Link> */}
        <Link to="/">返回首页</Link>
        <Link to="/fathercom">父组件页</Link>
        <Link to="/soncom">子组件页</Link>
        <p>子组件</p>
        <p>{this.props.info1}</p>
        <p>父组件中的数字：{this.props.info2}</p>
        <button onClick={()=>this.props.info3(777, this.state.msg)}>子传父</button>
      </div>
    )
  }
}

export default SonCom